<template>
    <div>
        <div class="mb-3 row ">
            <label for="inputname" class="col-sm-3 col-form-label text-right" >查找</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputname" v-model="bookname">
            </div>

            <div class="col-sm-1">
                <button class="btn btn-primary" @click="search">search</button>
                
            </div>
            <div class="col-sm-2"></div>
        </div>
    </div>
    <table class="table table-striped table-border table-hover ">

        <thead>

            <tr>
                <th>#</th>
                <th>书名</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td> {{ item.author }} </td>
            </tr>
        </tbody>

    </table>
    <hr>
    <div>
        <div class="mb-3 row ">
            <h3 class="text-center">添加书籍</h3>
        </div>
        <div class="mb-3 row ">
            <label for="addname" class="col-sm-3 col-form-label " style="text-align: right;">书名</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="addname" v-model="bookname">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="mb-3 row ">
            <label for="addauthor" class="col-sm-3 col-form-label " style="text-align: right;">作者</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="addauthor" v-model="bookauthor">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="mb-3 row ">
          <div class="col-sm-3"></div>  <button class="btn btn-primary col-sm-6" @click="add">新增</button>
            <!-- {{ list }} -->
        </div>
        <div class="col-sm-3"></div>
    </div>

</template>
<script setup>
import axios from 'axios'
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
const bookname = ref('');
const bookauthor = ref('');
const list = ref([])
const add = () => {
    axios({
        url:'/app/addbook',
        method:'post',
        data: {
            bookname: bookname.value,
            bookauthor: bookauthor.value
        }})
        .then(res => {
            console.log(res);
            list.value = res.data.data

        }).catch(error => {
            console.log(error);
        })
}

const search = () => {
    axios({
        url: '/mock/searchbooks',
        method: 'post',
        data: {
            name: bookname.value
        }
    })
        .then(res => {
            console.log(res);
            list.value = res.data.data

        }).catch(error => {
            console.log(error);
        })
}
onMounted(() => {
    axios({
        url: '/mock/getbooks',
        method: 'get',
    }).then(res => {
        console.log(res);
        list.value = res.data.data

    }).catch(error => {
        console.log(error);
    })
}
)


</script>
<style></style>